<template>
	<scroll-view scroll-y="true">
	<view class="content">
		<view>
			<view class="video-list">
				<view class="video-content" v-for="(item, ind) in assistants" :key="ind"
					@click="toAssistantDetail(item.id)">
					<view class="storelist">
						<image :src="item.imgUrl" mode="aspectFit"></image>
					</view>
					<!-- 门店列表右部开始 -->
					<view class="video-describe">
						<view class="video-tit">
							<text>{{item.nickname}}</text>(<text>{{item.currentStatus|formatStatus}}</text>)
						</view>
						<view class="video-reader">
							<view class="online">
								<text>{{item.age}}|{{item.serviceYear}}</text>
							</view>
						</view>
						<!-- 地址时间开始 -->
						<view class="video-reader">
							<!-- 时间 -->
							<text>个性签名:{{item.signature}}</text>
						</view>
						<view class="video-reader">
							<!-- 地址 -->
							<text class="video-price">￥{{item.price}}/小时</text>
						</view>
					</view>
					<view class="right">
						<view class="righticon">
							<view class="typeCost" style="flex: 1;">
								<text class="">预定</text>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 100rpx;"></view>
			</view>
		</view>
	</view>
	</scroll-view>
</template>

<script>
	import Api from '@/common/api';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		formatDate
	} from '@/common/date';
	export default {
		components: {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				assistants: [],
			}
		},
		onLoad(options) {
			this.getAllAssistant();
		},
		onShow() {
		},
		filters: {
			formatStatus(status) {
				if (status == 0) {
					return '可预约'
				}
				if (status == 1) {
					return '不可预约'
				}
			}
		},
		methods: {
			async getAllAssistant() {
				let params = {};
				let result = await Api.apiCall('get', Api.qsg.getAllAssistant, params);
				if (result) {
					console.log(result)
					this.assistants = result;
				}
			},
			toAssistantDetail(id){
				console.log("============" + id);
				uni.navigateTo({
					url:'/pages/assistant/assistantdetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		overflow-x: hidden
	}

	.priceSign {
		font-size: 24rpx;
	}

	.priceNum {
		font-size: 32rpx;
		font-weight: bold;
	}

	.priceIcon {
		font-size: 24rpx;
	}

	.schoolName {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bold;
		color: #000000;
	}

	.uni-input {
		padding: 0 24rpx;
	}

	.choese {
		width: 750rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		color: #888888;
	}

	.dataName {
		height: 60rpx;
	}

	.currentSchool {
		height: 60rpx;
		background: #FFFFFF;
	}

	.video-tit {
		font-size: 28rpx;
		color: #000000;
		display: inline-block;
		vertical-align: top;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.checkMore text {
		display: block;
		width: 100%;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 24rpx;
		color: #172a89;
		border: 1px solid #172A89;
		text-align: center;
		box-sizing: border-box;
		margin-top: 46rpx;
		border-radius: 50rpx;
	}

	.checkMore {
		font-size: 24rpx;
		color: #172a89;
		flex: 1;
	}

	.video-price {
		font-size: 30rpx;
		color: #127202;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		box-sizing: border-box;
	}

	.video-reader {
		font-size: 22rpx;
		font-weight: 500;
		color: #666;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	/* 搜索框 */
	.search-ico-1 {
		width: 40upx;
		height: 40upx;
		float: right;
	}

	.search-text {
		font-size: 14px;
		background-color: #FFFFFF;
		height: 60upx;
		width: 630upx;
	}

	.search-block {
		display: flex;
		flex-direction: row;
		padding-left: 60upx;
		position: relative;
		top: 30upx;
		-moz-box-shadow: 0 0 10px #e6e6e6;
		-webkit-box-shadow: 0 0 10px #e6e6e6;
		box-shadow: 0 0 10px #e6e6e6;
		border-radius: 18rpx;
		margin-bottom: 30rpx;
	}

	.search-ico-wapper {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0upx 0upx 0upx 40upx;
		border-bottom-left-radius: 18px;
		border-top-left-radius: 18px;
	}

	.search-ico-wapper1 {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0upx 40upx 0upx 0upx;
		border-bottom-right-radius: 18px;
		border-top-right-radius: 18px;
	}

	.shadow {
		width: 638upx;
		height: 60upx;
		border-radius: 18px;
		-moz-box-shadow: 0 0 10px #e6e6e6;
		-webkit-box-shadow: 0 0 10px #e6e6e6;
		box-shadow: 0 0 10px #e6e6e6;
		position: relative;
		top: -90upx;
		left: 60upx;
	}

	.video-content {
		width: 100%;
		height: 256rpx;
		display: flex;
		// padding-left: 80rpx;
		// padding-top: 10rpx;
	}
	
	.video-describe {
		display: inline-block;
		vertical-align: top;
		width: 380rpx;
		padding-top: 28rpx;
		padding-left: 5rpx;
	}
	
	.video-list {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	
	.video-tit {
		height: 54rpx;
		line-height: 54rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
		display: inline-block;
		vertical-align: top;
		letter-spacing: 1rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.righticon {
		color: #E36C54;
		margin-top: 33rpx;
		margin-left: 10rpx;
	}
	
	.right {
		width: 130rpx;
		margin-right: 20rpx;
	}
	
	.tag {
		width: 100rpx;
		height: 28rpx;
		flex: 1;
		text-align: center;
		background: linear-gradient(90deg, #FFE2AE 0%, #E3B97F 100%);
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #492A00;
		line-height: 28rpx;
		float: right;
		margin-left: 10rpx;
	}
	
	.video-reader {
		font-size: 22rpx;
		font-weight: 200;
		color: #666;
		letter-spacing: 2rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	.storelist {
		flex: 232rpx;
		padding-left: 22rpx;
		padding-top: 28rpx;
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			box-shadow: 0 0 2px #E36C54;
		}
	}

	.content {
		.tabs {
			height: 60rpx;
			display: flex;
			margin-top: 10rpx;

			.tabs-item {
				// 平均分布
				flex: 1;
				text-align: center;
				color: #111111;
				height: 60rpx;
				line-height: 60rpx;
			}

			.tabs-item-tag {
				color: #127202;
				border-bottom: 4rpx solid #127202;
			}
		}

		.item {
			padding: 10rpx;
			height: 2000rpx;
			background-color: #f7f7f7;
			display: grid;

			image {
				width: 400rpx;
				margin: auto;
			}

			text {
				text-align: center;
			}
		}
		
	}
	
	.typeCost {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #E36C54;
		color: #FFFFFF;
		text-align: center;
		font-weight: 600;
		letter-spacing: 3rpx;
		margin-top: 65rpx;
	}
</style>
